import { reactive, nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts/core';
import {
    DatasetComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import { BarChart, PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { LabelLayout } from 'echarts/features';
import { CountTo } from 'vue3-count-to';
import {
    getAmountAndUserStatistics,
    getPlatformProfitStatistics,
    getUserTrendStatistics,
    getLatestOrderList
} from './admin-home-index-cloud.js'
import {
    getToDayTime
} from '@/utils/time.js'
import {
    enumConverter
} from '../admin-order-list/js_sdk/validator/admin-order-list.js'


echarts.use([
    DatasetComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer,
    LabelLayout,
    PieChart
]);

export default {
    components: {
        CountTo
    },
    setup() {
        // 骨架加载状态
        const loading=ref(true);

        const topMenus = reactive({
            menusOne: [{
                value: 0,
                title: `今日订单总量`,
                icon: {
                    name: `layui-icon-auz`,
                    size: `25px`,
                    color: `#8c5fe1`
                },
                bk: `#f2ebfb`,
                list: {
                    progress: 0,
                    num_text: 0,
                    title: `总量`
                },
                unit: `单`,
                floatUnit: `元`,
            }, {
                value: 0,
                title: `今日成功订单`,
                icon: {
                    name: `layui-icon-chart-screen`,
                    size: `25px`,
                    color: `#49b8ff`,
                },
                bk: `#eef9ff`,
                list: {
                    progress: 0,
                    num_text: 0,
                    title: `成功`
                },
                unit: `单`,
                floatUnit: `元`,
            }, {
                value: 0,
                title: `今日退款订单`,
                icon: {
                    name: `layui-icon-snowflake`,
                    size: `25px`,
                    color: `#ff8c56`
                },
                bk: `#fef3ee`,
                list: {
                    progress: 0,
                    num_text: 0,
                    title: `退款`
                },
                unit: `单`,
                floatUnit: `元`,
            }],
            menusTwo: [{
                value: 0,
                title: `今日新增用户`,
                icon: {
                    name: `layui-icon-username`,
                    size: `25px`,
                    color: `#f95483`
                },
                bk: `#feeef1`,
                list: {
                    progress: 0,
                    num_text: 0,
                    title: `用户`
                },
                unit: `个`,
                floatUnit: `个`,
            }, {
                value: 0,
                title: `今日新增商户`,
                icon: {
                    name: `layui-icon-component`,
                    size: `25px`,
                    color: `#cbb64d`,
                },
                bk: `#fff5c2`,
                list: {
                    progress: 0,
                    num_text: 0,
                    title: `商户`
                },
                unit: `个`,
                floatUnit: `个`,
            }, {
                value: 0,
                title: `今日新增骑手`,
                icon: {
                    name: `layui-icon-flag`,
                    size: `25px`,
                    color: `#058373`
                },
                bk: `#e1f4f2`,
                list: {
                    progress: 0,
                    num_text: 0,
                    title: `骑手`
                },
                unit: `个`,
                floatUnit: `个`,
            }]
        })
        const echartsPieMenus=ref([])
        const lastOrderList=ref([])

        onMounted(async () => {
            getLatestOrderList().then(list=>{
                lastOrderList.value=list;
                loading.value=false;
            })
            getAmountAndUserStatistics(topMenus);
            const results = await setColumnarChart();
            setRoundChart(results);
        })


        async function setColumnarChart() {
            const chartDom1 = document.querySelector(`#leftColumnar1`)
            const chartDom2 = document.querySelector(`#leftColumnar2`)
            const myChart1 = echarts.init(chartDom1);
            const myChart2 = echarts.init(chartDom2);
            const showDay=7;
            const  {startMs}= getToDayTime()
            const startTimeMS = startMs - 1000*60*60*24*showDay
            const endTimeMS = startMs
            const results=await Promise.all([
                new Promise(next=>{
                    getPlatformProfitStatistics(startMs,startTimeMS,endTimeMS,showDay).then(options=>{
                        myChart1.setOption(options);
                        next(options);
                    })
                }),
                new Promise(next=>{
                    getUserTrendStatistics(startMs,startTimeMS,endTimeMS,showDay).then(options=>{
                        myChart2.setOption(options);
                        next(options)
                    })
                })
            ])
            return results
        }

        function setRoundChart(dbData) {
            const chartDom = document.querySelector(`#rightRound`)
            const myChart = echarts.init(chartDom);
            const options={
                tooltip: {
                    trigger: 'item'
                },
                // legend: {
                //     top: '0%',
                //     left: 'center'
                // },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 10,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            }
            for(let i=0;i<dbData.length;i++){
                const item = dbData[i];
                for(let j=0;j<item.series.length;j++){
                    const {data,name,itemStyle}= item.series[j];
                    options.series[0].data.push({
                        value:data.reduce((t,v)=>t+v,0),
                        name,
                        itemStyle
                    })
                }
            }
            echartsPieMenus.value=options.series[0].data;
            myChart.setOption(options)
        }
        return {
            loading,
            enumConverter,
            lastOrderList,
            topMenus,
            echartsPieMenus,
            setColumnarChart
        }
    }
}